<template>
  <div
    style="
      width: 100%;
      height: 100%;
      background: #2b4b6b;
      display: flex;
      align-items: center;
      justify-content: center;
    "
  >
    <div class="login-container">
      <!-- logo区域 -->
      <div class="logo">
        <a target="_blank">
          <img src="../assets/image/logo.png" alt />
        </a>
      </div>

      <!-- 登录的表单 -->
      <el-form
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginFormRef"
        label-width="0px"
        class="loginform_style"
      >
        <!-- 登录名 -->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名">
            <!-- 使用 slot 为 输入框设置图标 -->
            <!-- <i slot="prefix" class="iconfont icon-user"></i> -->
          </el-input>
        </el-form-item>
        <!-- 登录密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
          >
            <!-- <i slot="prefix" class="iconfont icon-3702mima"></i> -->
          </el-input>
        </el-form-item>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: flex-end;
            width: 400px;
            margin-bottom: 30px;
          "
        >
          <div style="display: flex; align-items: center">
            <el-dropdown trigger="click" @command="selectLoginType">
              <span class="el-dropdown-link">
                {{ switchValue == 1 ? "商家登录" : "管理员登录"
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">商家登录</el-dropdown-item>
                <el-dropdown-item command="2">管理员登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- <el-switch
              v-model="switchValue"
              active-color="#13ce66"
              inactive-color="#eeeeee"
            >
            </el-switch>
            <span style="margin-left: 10px">管理员登录</span> -->
          </div>
        </div>
        <el-form-item class="btns">
          <el-button type="primary" @click="login" :loading="isLoading"
            >登录</el-button
          >
          <!-- <el-button type="primary" @click="registor">注册</el-button> -->
          <!-- <el-popover
  ref="popover1"
  placement="top-start"
  title="关注公众号"
  width="260"
  trigger="hover"
  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"><span>回复<span style="color:red;">体验</span>获取账号密码</span><img src="../assets/image/gongzhonghao.jpg" alt="">
        </el-popover>-->

          <!-- <el-button type="info" v-popover:popover1>体验</el-button> -->
        </el-form-item>
      </el-form>
      <!--  -->
      <div id="introduce">
        <!-- <a href="https://github.com/mayizhong/vue/blob/master/README.md">点击查看项目介绍</a>  -->
        <!-- display: flex;
      justify-content: center;-->
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      switchValue: 1,
      // 登录的表单绑定到的数据对象
      loginForm: {
        username: "",
        password: "",
        //visible2: false
      },
      // 登录表单的验证规则
      loginFormRules: {
        // 登录名的校验规则
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          // { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
        ],
        // 登录密码的校验规则
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          // { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ],
      },
      isLoading: false,
    };
  },
  created() {
    window.sessionStorage.setItem('loginType',1);
    this.$store.commit('clearMenu', '')
    //window.sessionStorage.getItem('loginType');
    // var lett = this;
    // document.onkeydown = function(e) {
    //   var key = window.event.keyCode;
    //   if (key === 13) {
    //     lett.login();
    //   }
    // };
  },
  methods: {
    selectLoginType(type) {
      window.sessionStorage.setItem('loginType',type);
      console.log(type);
      this.switchValue=type;
    },
    //管理员登录
    adminLogin() {
      // /admin/login
    },
    registor() {},
    // 点击重置按钮，重置表单项
    resetForm() {
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      if (!this.loginForm.username) {
        this.$message.info("请输入用户名");
        return;
      }
      if (!this.loginForm.password) {
        this.$message.info("请输入密码");
        return;
      }
      let loginData = {
        account: this.loginForm.username,
        password: this.loginForm.password,
      };
      let loginApi = "";
      if (this.switchValue==1) {
        loginApi = "/shop/login";
        
      } else {
        loginApi = "/manage/admin/login";
      }

      this.isLoading = true;
      this.$http.post(loginApi, loginData).then((res) => {
        console.log(res.data);
        this.isLoading = false;
        if (res.data.status == 1) {
          window.sessionStorage.setItem("token", res.data.data);
          this.$message.success("登录成功");
          // console.log(res)
          localStorage.setItem('token',res.data);
          if (this.switchValue==1) {
            this.$router.push("/home");
            
          } else {
            this.$router.push("/Welcome");
          }
        } else {
          console.log(456);
          this.$message.error(res.data.message);
        }
      });
    },
    // 点击按钮登录
    async loginto() {
      /* eslint-disable */
      //this.$http.post({ method: 'get', url: '/index/Operation/index', baseURL: 'http://www.building.com', data: {}, responseType: 'json' }).then((response) => {}).catch(() => { alert(111) })
      //this.$http.post('http://129.226.76.172:9981/index/Operation/index')
      //this.$http.post('http://www.building.com/index/Operation/index')
      /* eslint-disable */
      // 验证表单
      // let loginData = {
      //   account: this.loginForm.username,
      //   password: this.loginForm.password
      // };
      // const { data: res } = await this.$http.post(
      //   "/manage/admin/login",
      //   loginData
      // ); //this.loginForm
      // console.log(res, "获取登录数据");
      // if (res.status == 0) {
      //   this.$message.error(res.message);
      // } else {
      //   this.$message.success("登录成功");
      //   window.sessionStorage.setItem("token", res.data);
      //   // console.log(res)
      //   // localStorage.setItem('token',res.data);
      //   this.$router.push("/home");
      // }
      // this.$refs.loginFormRef.validate(async valid => {
      //   // 验证失败，立即return
      //   if (!valid) return;
      //   // 发起登录的请求
      //   // 登录失败
      //   // if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      //   // // 登录成功
      //   // this.$message.success(res.meta.msg)
      //   // // 把登录成功后的令牌，保存到 sessionStorage， 供后续接口使用
      //   // window.sessionStorage.setItem('token', res.data.token)
      //   // // 使用 JS API 实现登录跳转   this.$router
      //   // // 跳转到 后台主页
      //   // this.$router.push('/home')
      // });
    },
  },
};
</script>

<style scoped lang="less">
.login-container {
  width: 450px;
  height: 314px;
  background-color: #fff;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
  padding-bottom: 30px;
  .logo {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 0 10px #eee;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    background-color: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }

  .loginform_style {
    padding: 0 20px;
    margin-top: 110px;
  }

  .btns {
    display: flex;
    justify-content: center;
  }

  #introduce {
    position: absolute;
    top: 27%;
    width: 100%;
    text-align: center;
    a {
      text-decoration: none;
    }
  }
}
</style>
